<!DOCTYPE>
<html lang="en" ng-app="hello">
<title>Jquery结合angular.js与bootstrap.js实现无刷新翻页+查找</title>
	<header>
		<meta charset="UTF-8">
		<script src="js/angular.min.js"></script>
		<script src="js/ui-bootstrap-tpls.min.js"></script>
		<link href="css/bootstrap.css" rel="stylesheet">
    </header>
<body ng-controller="Hello">
	<div class="introduction">
		<!-- Title Ends -->

		<div id="page" class="page">
			<form id="searchForm" method="post">
				<fieldset>
					<input id="s" type="text" placeholder="选择区域"  ng-model="filter.$"/>
				</fieldset>
			</form>
		</div>
	</div>
	<div class="tabl1">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>编号</th>
					<th>媒体形式</th>
					<th>社区名称</th>
					<th>社区地址</th>
					<th>媒体编号</th>
					<th>社区类型</th>
					<th>社区等级</th>
					<th>社区建设年代</th>
					<th>居民人数（户）</th>
					<th>房价（元）</th>
					<th>面积</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in items|filter:filter|paging:page.index:page.size">
					<td>{{item.id}}</td>
					<td>{{item.Media}}</td>
					<td>{{item.communityName}}</td>
					<td>{{item.ardess}}</td>
					<td>{{item.MediaNumber}}</td>
					<td>{{item.CommunityType}}</td>
					<td>{{item.Communitylevel}}</td>
					<td>{{item.birthday}}</td>
					<td>{{item.People}}</td>
					<td>{{item.Prices}}</td>
					<td>{{item.mianji}}</td>
				</tr>

			</tbody>

		</table>
		<pagination total-items="items|filter:filter|size" ng-model="page.index" max-size="5"
                items-per-page="page.size"
                class="pagination-sm pull-right" boundary-links="true"></pagination>
		<script>
        var itemsList = angular.module('hello',['ui.bootstrap']);
    	itemsList.controller('Hello', function($scope, $http){
    			$scope.items=[ ]
  
    			
                console.log($scope.total);
                $scope.ini=1;
                $scope.num=1;
                $scope.page = {size:4, index: 1}; 
				//$scope.page1 = {'size':size, 'index': index}; 
				$http({
                    method: 'get', url: "json.php", params: $scope.page
                }).success(function (data1) {
				  console.log(data1.result);
                  $scope.items=data1.result;
				 //$scope.total=$scope.items.length;
				
                }

                ); 
				 
    			
    	})
        itemsList.filter('paging', function() {
		
  return function (items, index, pageSize) {
							 
    if (!items)
      return [];

    var offset = (index - 1) * pageSize;
    return items.slice(offset, offset + pageSize);
  }
});
       itemsList.filter('size', function() {
  return function (items) {
    if (!items)
      return 0;
    
    return items.length || 0
  }
});
    </script>
	</div>

</body>
</html>